import { FC, MouseEvent } from 'react'

import RightSafeGovernTabItem, { Option } from './RightSafeGovernTabItem'

export type RightSafeGovernTabProps = {
  options?: Option[]
  activeTabValue?: string | number
  onChange?: (value: string | number, option: Option) => void
  onMouseEnter?: (e: MouseEvent) => void
  onMouseLeave?: (e: MouseEvent) => void
}

const RightSafeGovernTab: FC<RightSafeGovernTabProps> = ({
  options = [],
  activeTabValue,
  onChange,
  onMouseEnter,
  onMouseLeave
}) => {
  return (
    <div
      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {options?.map((item, index) => {
        return (
          <RightSafeGovernTabItem
            key={index}
            label={item.label}
            value={item.value}
            activeTabValue={activeTabValue}
            onChange={onChange}
          />
        )
      })}
    </div>
  )
}

export default RightSafeGovernTab
